<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Article</title>
    <link rel="shortcut icon" href="images/ico.png" >
    <style>
        *{
            margin:0;
        }
        #article{
            width: 1200px;
            position: relative;
            margin: 0 auto;
            margin-top: 70px;
        }
        #articleLeft{
            width: 740px;
            margin-right: 10px;
            padding: 30px;
            background-color: white;
            float: left;
            border-radius: 4px;
        }
        #articleRight{
            width: 330px;
            /* height: 500px; */
            padding:30px;
            background-color: white;
            float: left;
            border-radius: 4px;
        }
        #articleLeft .span p{
            margin-top: 20px;
            padding: 2px 6px;
            height: 24px;
            background-color: rgb(157, 217, 251);
            color:rgb(5, 147, 230);
            border-radius: 6px;
            display: inline-block;
        }
        #articleLeft .span span{
            margin-left: 30px;
            color:rgb(130, 131, 131);
            display: inline-block;
            letter-spacing:2px
        }
        #articleLeft .main img{
            width: 100%;
            height: 100%;
        }
        #articleRight .portrait{
            float: left;
            width: 64px;
            border-radius: 5px;
            margin-top: 5px;
            padding-right: 20px;
        }
        #articleRight .user img{
            width: 64px;
            height: 64px;
            float: left;
            border-radius: 5px;
        }
        #articleRight .username{
            float: left;
            width: 240px;
        }
        #articleRight .name p{
            height: 52px;
            line-height: 26px;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        #articleRight .leave {
            line-height: 20px;
            color:rgb(116, 116, 116);
            letter-spacing:2px;
        }
        #articleRight .signature{
            width: 330px;
            line-height: 26px;
            padding: 25px 0;
            height: 52px;
            color:grey;
            font-size: 17px;
            letter-spacing:2px;
            overflow: hidden;
        }
        #articleRight .fans{
            font-size: 18px;
            color:rgb(93, 93, 93);
        }
        #articleRight .fans div{
            float: left;
            width: 50%;
        }
        #articleRight .fans span{
            color:black;
            font-weight: bolder;
        }
        #articleRight .follow{
            width: 330px;
            padding-top: 30px;
            clear: both;
        }
        #articleRight .follows{
            width: 140px;
            height: 40px;
            border-radius: 3px;
            background-color:rgb(67, 184, 252);
            border:1px solid rgb(67, 184, 252);
            position: relative;
            margin: 0 auto;
            color: white;
            line-height: 40px;
            font-size: 20px;
            text-align: center;
            box-shadow: 0 0 2px rgba(158, 156, 156, 0.5);
        }
        #articleRight .follow .followscss1{
            background-color:red;
        }
        #articleRight .follow .followscss2{
            background-color:rgb(7, 140, 218);
        }
        #article .side{
            clear: both;
            position: absolute;
            position: fixed;
            width: 70px;
            top:190px;
            left: 50%;
            margin-left: -680px;
        }
        #article .side p{
            text-align: center;
        }
        #article .side li{
            list-style: none;
            width: 36px;
            height: 36px;
            position: relative;
            margin:12px auto;
            text-align: center;
            border-radius: 50%;
            background-color: white;
            box-shadow:  0 0 1px rgb(130, 131, 131);
        }
        #article .side li svg{
            position: relative;
            margin:8px 0;
        }
        #article .side :nth-child(2){
            width: 48px;
            height: 48px;
            border: 1px solid rgb(5, 147, 230);
            margin-bottom: 15px;
        }
        #article .side p{
            font-size: 18px;
            font-weight: 600;
            color: rgb(133, 132, 132);
        }
        #article .main p{
            max-width: 740px;
            overflow: auto;
            letter-spacing:1px;
            /* text-indent:2em; */
            padding:4px 0;
            color: rgb(51, 51, 51);
        }
        #article .main h1,h2,h3{
            padding:10px 0;
        }
        #article .main hr{
            margin:10px 0;
        }
        #article .articletime{
            padding-top: 15px;
            color: gray;
        }
        #article .articleicon{
            padding-top: 50px;
            width: 400px;
            position: relative;
            margin:0 auto;
        }
        #article .articleicon1{
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            width: 90px;
            height: 40px;
            float: left;
            color: rgb(29, 168, 248);
            border:1px solid rgb(29, 168, 248);
            border-radius: 5px;
            margin-left: 20px;
        }
        #article .articleicon2{
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 18px;
            float: left;
            color: rgb(101, 101, 101);
            border:1px solid rgb(101, 101, 101);
            border-radius: 5px;
            margin-left: 20px;
        }
        #article .articleicon2 .icon{
            /* position: relative; */
            /* margin-top: 15px; */
        }
        #conment{
            float: left;
            width: 800px;
            height: 300px;
            margin-top: 30px;
        }
        #conment .conmentTitle{
            height: 40px;
            width: 800px;
            line-height: 40px;
            font-size: 22px;
        }
        #conment .conmentmain{
            width: 740px;
            padding:30px;
            border-radius: 5px;
            background-color: white;
        }
        #conment .conmentTitle1{
            float: left;
        }
        #conment .conmentTitle2{
            float: right;
            color: gray;
            padding:0 10px
        }
        #conment .conmentTitle3{
            float: right;
        }
        #conment .conmentown{
            height: 38px;
        }
        #conment .conmentownimg{
            float: left;
            margin-right:20px;
        }
        #conment .conmentmain img{
            width: 38px;
            height: 38px;
            border-radius: 5px;
            margin:0;
            padding: 0;
        }
        #conment .conmentowntext{
            float: left;
        }
        #conment .conmentowntext input{
            margin: 0;
            padding: 0;
            border-radius: 5px;
            outline:0;
            height:38px;
            width: 670px;
            font-size: 18px;
            padding-left: 10px;
            float: left;
            border: 1px solid rgb(167, 165, 165);
        }
        #conment .conmentownup{
            width: 90px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            margin-top: 10px;
            margin-bottom: 5px;
            text-align: center;
            color: white;
            border-radius: 5px;
            float: right;
            background-color: rgb(90, 186, 241);
        }
        #conment .conmentother{
            clear: both;
            padding-top: 20px;
        }
        #conment .conmentothertext{
            float: left;
            width: 680px;
            font-size: 16px;
            padding-top: 30px;
            letter-spacing:2px;
            /* color:rgb(29, 168, 248) */
            /* font-weight: bolder; */
        }
        #conment .conmentothername{
            color:rgb(29, 168, 248);
            font-weight: bolder;
        }
        #conment .conmentothertime{
            clear: both;
            position: relative;
            padding-left: 60px;
            margin-top: 25px;
            color: gray;
            line-height: 32px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(61, 60, 60, 0.52);
        }#conment .conmentothertime svg{
            padding-top: 15px;
            
        }
        #conment  svg{
            fill:white;
            /* background-color: thistle; */
        }
    </style>
<script>
    var article =''
    window.onload=function(){
        //侧边栏
        //1
        var Fabulousflag=1
        $(".side li:eq(0)").mouseover(function(){
            if(Fabulousflag){
                this.style='background-color:rgb(5, 147, 230)';
                $(this).eq(0).children().children().css('fill','white')
            }  
        })
        $(".side li:eq(0)").mouseout(function(){
            if(Fabulousflag){
                this.style='background-color:white'
                $(this).eq(0).children().children().css('fill','#707070')
            }         
        })
        $(".side li:eq(0)").click(function(){
            var t=$('.side p')[0].innerText
            var myreg = /\d+/ig;
            if(Fabulousflag){
                addf()
                var num=parseInt(myreg.exec(t)[0]) 
                num=num+1
                $('.side p').html(`<i></i>${num}`)
                $('.articleicon1').html(`<i></i>赞同${num}`)
                this.style='background-color:rgb(5, 147, 230)'
                $(this).eq(0).children().children().css('fill','white')
                $('.articleicon1').css('background-color','rgb(5, 147, 230)')
                $('.articleicon1').css('color','white')
                Fabulousflag=0
            }
            else{
                delf()
                var num=parseInt(myreg.exec(t)[0]) 
                num=num-1
                $('.side p').html(`<i></i>${num}`)
                $('.articleicon1').html(`<i></i>赞同${num}`)
                this.style='background-color:white'
                $(this).eq(0).children().children().css('fill','#707070')
                $('.articleicon1').css('background-color','white')
                $('.articleicon1').css('color','rgb(5, 147, 230)')
                Fabulousflag=1
            }
        })
        //2|3
        $(".side li:gt(0)").mouseover(function(){
            this.style='background-color:gray';
            $(this).eq(0).children().children().css('fill','white')
        })
        $(".side li:gt(0)").mouseout(function(){
            this.style='background-color:white';
            $(this).eq(0).children().children().css('fill','#707070')
        })
        $('.side li:gt(0)').click(function(){
            console.log($('.conmentmain')[0].offsetTop)
            $('html,body').animate({scrollTop:$('.conmentmain')[0].offsetTop},'slow');
        })
        //内容底部
        $('.articleicon1').mouseover(function(){
            if(Fabulousflag){
                $(this).css('background-color','rgb(5, 147, 230)')
                $(this).css('color','white')
            }
        })
        $('.articleicon1').mouseout(function(){
            if(Fabulousflag){
                $(this).css('background-color','white')
                $(this).css('color','rgb(5, 147, 230)')
            }
        })
        $(".articleicon1").click(function(){
            var t=$('.articleicon1').text()
            var myreg = /\d+/ig;
            if(Fabulousflag){
                var num=parseInt(myreg.exec(t)[0]) 
                num=num+1
                $('.side p').html(`<i></i>${num}`)
                $('.articleicon1').html(`<i></i>赞同${num}`)
                $(".side li:eq(0)").css('background-color','rgb(5, 147, 230)')
                $(".side li:eq(0)").eq(0).children().children().css('fill','white')
                $(this).css('background-color','rgb(5, 147, 230)')
                $(this).css('color','white')
                Fabulousflag=0
            }
            else{
                var num=parseInt(myreg.exec(t)[0]) 
                num=num-1
                $('.side p').html(`<i></i>${num}`)
                $('.articleicon1').html(`<i></i>赞同${num}`)
                $(".side li:eq(0)").css('background-color','white')
                $(".side li:eq(0)").eq(0).children().children().css('fill','#707070')
                $(this).css('background-color','white')
                $(this).css('color','rgb(5, 147, 230)')
                Fabulousflag=1
            }
        })
        //2
        var Collectionflag=1;
        $('.articleicon2:first').mouseover(function(){
            if(Collectionflag){
                $(this).css('background-color','rgb(121, 121, 121)')
                $(this).css('color','white')
                $(this).eq(0).children().children().css('fill','white')
            }
        })
        $('.articleicon2:first').mouseout(function(){
            if(Collectionflag){
                $(this).css('background-color','white')
                $(this).css('color','rgb(121, 121, 121)')
                $(this).eq(0).children().children().css('fill','#707070')
            }
        })
        $('.articleicon2:first').click(function(){
            var t=$('.articleicon2:first')[0].innerText
            var myreg = /\d+/ig;
            if(Collectionflag){
                var num=parseInt(myreg.exec(t)[0]) 
                num=num+1
                $('.articleicon2:first').html(`<i></i>收藏${num}`)
                $(this).css('background-color','rgb(121, 121, 121)')
                $(this).css('color','white')
                $(this).eq(0).children().children().css('fill','white')
                Collectionflag=0
            }
            else{
                var num=parseInt(myreg.exec(t)[0]) 
                num=num-1
                $('.articleicon2:first').html(`<i></i>收藏${num}`)
                $(this).css('background-color','white')
                $(this).css('color','rgb(121, 121, 121)')
                $(this).eq(0).children().children().css('fill','#707070')
                Collectionflag=1
            }
        })
        $('.articleicon2:last').mouseover(function(){
                $(this).css('background-color','rgb(121, 121, 121)')
                $(this).css('color','white')
                $(this).eq(0).children().children().css('fill','white')
        })
        $('.articleicon2:last').mouseout(function(){
                $(this).css('background-color','white')
                $(this).css('color','rgb(121, 121, 121)')
                $(this).eq(0).children().children().css('fill','#707070')
        })
        //关注
        $('.follows').mouseover(function(){
            if(followsflag)
            $(this).css('background-color','rgb(7, 140, 218)')
        })
        $('.follows').mouseout(function(){
            if(followsflag)
            $(this).css('background-color','rgb(67, 184, 252)')
        })
        var followsflag=1
        $('.follows').click(function(){
            if(followsflag){
                $(this).css('background-color','rgb(7, 140, 218)')
                $(this).html("已关注")
                followsflag=0
            }
            else{
                $(this).css('background-color','rgb(67, 184, 252)')
                $(this).html("+关注他")
                followsflag=1
            }
        })
        $('.conmentownup').mouseover(function(){
            $(this).css('background-color','rgb(7, 140, 218)')
        })
        $('.conmentownup').mouseout(function(){
            $(this).css('background-color','rgb(47, 184, 252)')
        })
        // console.log($('.follows'))
        //调用临时数据
        if(sessionStorage['article']){
            article = JSON.parse(sessionStorage['article'])
            // console.log(article[0].aId)
        }
        // console.log(document.querySelector('#aId').innerHTML)
        $.ajax({
                url:'http://localhost:3000/article/article',
                type:'get',
                dataType:'json',
                data:{aid:article[0].aId},
                success:function(results){
                    var strHTML=''
                    var e=results.data
                    // console.log(e)
                    $('.main').html(e[0].detailText)
                    $('.side p').text(e[0].likeCilck)
                    $('.span p').text(e[0].label)
                    $('.leftTitle h1').text(e[0].title)
                    $('.articleicon1').text('点赞'+e[0].likeCilck)
                    $('.articleicon2:first').text('收藏'+e[0].collect)
                    $('.conmentTitle1').text(e[0].response+'条评论')
                    var userid=e[0].uId
                    var articleid=e[0].tId
                    $.ajax({
                        url:'http://localhost:3000/article/author',
                        type:'get',
                        data:{uid:userid},
                        dataType:'json',
                        success:function(res){
                            // console.log(res.data[0])
                            $('.username .name p').text(res.data[0].nickName)
                            $('.signature').text(res.data[0].Signature)
                            $('.portrait').html(`<img src="upload/${res.data[0].headImg}" alt="">`) 
                        }      
                    })
                    $.ajax({
                        url:'http://localhost:3000/article/comment',
                        type:'get',
                        data:{aid:articleid},
                        dataType:'json',
                        success:function(res){
                            var strHTML=''
                            var e=res.data
                            for(var i=0;i<e.length;i++){
                                console.log('1')
                                strHTML+=`
                            <div class="conmentother">
                                <div class="conmentownimg"><img src="upload/${e[i].headImg}" alt=""></div>
                                <div class="conmentothername">${e[i].nickName}<span style="color: black;"> </span> <p></p></div>
                                <div class='conmentothertext'>${e[i].content}</div>
                            </div>
                                <div class="conmentothertime">
                                <svg t="1600085653527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6436" width="20" height="20"><path d="M499.432727 886.225455h-192.465454c-12.8 0-23.272727-10.472727-23.272728-23.272728s10.472727-23.272727 23.272728-23.272727h192.465454c12.8 0 23.272727 10.472727 23.272728 23.272727s-10.472727 23.272727-23.272728 23.272728z" fill="#707070" p-id="6437"></path><path d="M306.734545 886.225455H165.236364c-25.6 0-46.545455-20.945455-46.545455-46.545455V462.196364c0-25.6 20.945455-46.545455 46.545455-46.545455h141.498181c12.8 0 23.272727 10.472727 23.272728 23.272727v424.029091c0 12.8-10.24 23.272727-23.272728 23.272728zM165.236364 462.196364v377.483636h118.225454V462.196364H165.236364z" fill="#707070" p-id="6438"></path><path d="M737.978182 886.225455h-114.967273c-12.8 0-23.272727-10.472727-23.272727-23.272728s10.472727-23.272727 23.272727-23.272727h114.967273c11.636364 0 21.643636-8.378182 23.505454-20.014545l54.923637-329.774546c1.163636-6.981818-0.698182-13.963636-5.352728-19.316364-4.654545-5.352727-11.170909-8.378182-18.152727-8.378181h-224.116363c-21.643636 0-42.356364-11.403636-52.596364-28.858182-8.843636-14.894545-8.843636-32.116364-0.232727-47.243637 28.392727-50.269091 46.545455-171.054545 33.047272-190.138181-4.654545-4.421818-11.869091-10.472727-18.618181-10.472728-6.516364 0-13.963636 5.818182-18.85091 10.938182-3.258182 4.421818-11.869091 27.229091-18.850909 45.614546-30.952727 82.385455-83.083636 220.392727-186.181818 220.392727-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272728c70.981818 0 117.527273-123.810909 142.661818-190.138181 13.730909-36.305455 20.014545-52.829091 29.323637-62.138182 32.581818-32.581818 71.214545-32.349091 103.563636 0 40.029091 40.029091 1.629091 196.654545-25.832727 245.527272 0 2.094545 4.887273 6.749091 12.334545 6.749091h224.116364c20.712727 0 40.261818 9.076364 53.76 24.901819s19.083636 36.538182 15.592727 57.018181L807.563636 827.345455a70.283636 70.283636 0 0 1-69.585454 58.88z" fill="#707070" p-id="6439"></path></svg>
                                <span>${e[i].likes}</span>个 &nbsp;· <span>9月12日</span> 
                            </div> `
                            }
                            $('.conmentmain:first').append(strHTML)
                        }      
                    })
                }
            })
}
        function uptext(txt){
            var txt=$('.uptxt')[0].value
            $('.uptxt')[0].value=''
            // console.log(txt)
            uptexts(txt)        
        }
        function uptexts(txt){
            var date=new Date();
            $.ajax({
                url:'http://localhost:3000/nav/img',
                type:'get',
                dataType:'json',
                data:{uid:uid},
                success:function(res){
                    var e=res.data
                    console.log(e)
                    var strHTMl=''
                    strHTMl+=`
                    <div class="conmentother">
                        <div class="conmentownimg"><img src="upload/${e[0].headImg}" alt=""></div>
                        <div class="conmentothername">${e[0].nickName}<span style="color: black;"> </span> <p></p></div>
                        <div class='conmentothertext'>${txt}</div>
                    </div>
                    <div class="conmentothertime">
                        <svg t="1600085653527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6436" width="20" height="20"><path d="M499.432727 886.225455h-192.465454c-12.8 0-23.272727-10.472727-23.272728-23.272728s10.472727-23.272727 23.272728-23.272727h192.465454c12.8 0 23.272727 10.472727 23.272728 23.272727s-10.472727 23.272727-23.272728 23.272728z" fill="#707070" p-id="6437"></path><path d="M306.734545 886.225455H165.236364c-25.6 0-46.545455-20.945455-46.545455-46.545455V462.196364c0-25.6 20.945455-46.545455 46.545455-46.545455h141.498181c12.8 0 23.272727 10.472727 23.272728 23.272727v424.029091c0 12.8-10.24 23.272727-23.272728 23.272728zM165.236364 462.196364v377.483636h118.225454V462.196364H165.236364z" fill="#707070" p-id="6438"></path><path d="M737.978182 886.225455h-114.967273c-12.8 0-23.272727-10.472727-23.272727-23.272728s10.472727-23.272727 23.272727-23.272727h114.967273c11.636364 0 21.643636-8.378182 23.505454-20.014545l54.923637-329.774546c1.163636-6.981818-0.698182-13.963636-5.352728-19.316364-4.654545-5.352727-11.170909-8.378182-18.152727-8.378181h-224.116363c-21.643636 0-42.356364-11.403636-52.596364-28.858182-8.843636-14.894545-8.843636-32.116364-0.232727-47.243637 28.392727-50.269091 46.545455-171.054545 33.047272-190.138181-4.654545-4.421818-11.869091-10.472727-18.618181-10.472728-6.516364 0-13.963636 5.818182-18.85091 10.938182-3.258182 4.421818-11.869091 27.229091-18.850909 45.614546-30.952727 82.385455-83.083636 220.392727-186.181818 220.392727-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272728c70.981818 0 117.527273-123.810909 142.661818-190.138181 13.730909-36.305455 20.014545-52.829091 29.323637-62.138182 32.581818-32.581818 71.214545-32.349091 103.563636 0 40.029091 40.029091 1.629091 196.654545-25.832727 245.527272 0 2.094545 4.887273 6.749091 12.334545 6.749091h224.116364c20.712727 0 40.261818 9.076364 53.76 24.901819s19.083636 36.538182 15.592727 57.018181L807.563636 827.345455a70.283636 70.283636 0 0 1-69.585454 58.88z" fill="#707070" p-id="6439"></path></svg>
                        <span>0</span>个 &nbsp;· <span>${date.toLocaleDateString()}</span> 
                    </div> `
                    $('.conmentmain:first').append(strHTMl)   
                }
            })
            $.ajax({
                url:'http://localhost:3000/article/commentown',
                type:'get',
                dataType:'json',
                data:{
                    tid:JSON.parse(sessionStorage['article'])[0].aId,
                    content:txt,
                    uid:uid,
                    tTime:date.toLocaleDateString(),
                    likes:0,
                },
            })
            // console.log(JSON.parse(sessionStorage['article'])[0].aId)
        }
        //点赞进数据库
        function addf(){
            $.ajax({
                url:'http://localhost:3000/article/addFabulous',
                type:'get',
                dataType:'json',
                data:{tid:article[0].aId},
                success:function(res){
                    console.log('增加成')
                }
             })
        }
        //删除进数据库
        function delf(){
            $.ajax({
                url:'http://localhost:3000/article/delFabulous',
                type:'get',
                dataType:'json',
                data:{tid:article[0].aId},
                success:function(res){
                    console.log('删除成')
                }
             })
        }
    window.onscroll=function(){
            var far=document.documentElement.scrollTop
            var side=document.getElementsByClassName('side')[0]
            if(far>=120){
                side.style.position='fixed'
            }
            else{
                side.style.position='absolute'
            }
        }
</script>
</head>
<body style="background-color: rgb(233,236,239);">
    <div id="Navigation"></div>
    <div id="article">
        <div id="articleLeft">
            <div class='leftTitle'>
                <h1></h1>
                <div class='span'><p></p><span></span></div>
                <hr style="margin-top: 10px;margin-bottom: 10px;">   
            </div>
            <div class='main'>   
            </div>
            <div class="articletime">
                <p>阅读1111&nbsp;&nbsp;更新发布于9月1日</p>
            </div>
            <div class="articleicon">
                <div class="articleicon1"></div>
                <div class="articleicon2"></div>
                <div class="articleicon2">
                    分享.
                    <svg t="1600085557732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5413" width="22" height="22"><path d="M755.34336 443.79136a191.488 191.488 0 1 0-188.81536-157.47072L397.27616 357.32992a179.7376 179.7376 0 1 0-34.2528 267.93984l150.9376 106.22976a159.0528 159.0528 0 0 0-11.87328 60.2368 161.32096 161.32096 0 1 0 56.832-122.19904l-142.39232-100.23424a178.82112 178.82112 0 0 0 18.432-144.79872L594.944 357.376a192 192 0 0 0 160.39936 86.41536zM158.66368 476.29312a103.6032 103.6032 0 1 1 103.6032 103.23456 103.53664 103.53664 0 0 1-103.6032-103.23456z m504.58624 231.3216a84.1216 84.1216 0 1 1-84.41856 84.1216 84.36736 84.36736 0 0 1 84.41856-84.1216z m92.09344-569.7024a114.688 114.688 0 1 1-115.11808 114.688 115.03616 115.03616 0 0 1 115.11808-114.688z" fill="#707070" p-id="5414"></path></svg>
                </div>
            </div>
        </div>
        <div id="articleRight">
            <div class='user'>
                <div class='portrait'><img src="images/icon04.jpg" alt=""></div>
                <div class='username'>
                    <div class="name"><p>SegmentFault 行业快讯1111</p></div>
                    <div class='leave'>等级 : 有道者</div>
                </div>
                <div style="clear: both;"></div>
                <div class="signature">第一时间为开发者提供行业相关的实时热点资讯</div>
                <div class='fans'>
                    <div><span>2227</span> 人关注</div>
                    <div><span>198</span> 篇文章</div>    
                </div>
                <div class="follow ">
                    <div class="follows">+关注他</div>
                </div>
            </div>
        </div>
        <div id="conment">
            <div class="conmentTitle">
                <div class="conmentTitle1">6条评论</div>
                <div class="conmentTitle2">时间</div>
                <div class="conmentTitle3">点赞数</div>
            </div>
            <div class='conmentmain'>
                <div class="conmentown">
                    <div class="conmentownimg"><img src="upload/icon06.jpg" alt=""></div>
                    <div class="conmentowntext"><input class='uptxt' type="text" placeholder="撰写评论"></div>
                    <div class="conmentownup" onclick="uptext(this)">提交评论</div>
                </div>
                <div style="clear: both;"></div>
                <!-- <div class="conmentother">
                    <div class="conmentownimg"><img src="images/icon02.jpg" alt=""></div>
                    <div class="conmentothername">Hooopo <span style="color: black;"> </span> <p></p></div>
                    <div class='conmentothertext'>单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。</div>
                </div>
                <div class="conmentothertime">
                    <svg t="1600085653527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6436" width="20" height="20"><path d="M499.432727 886.225455h-192.465454c-12.8 0-23.272727-10.472727-23.272728-23.272728s10.472727-23.272727 23.272728-23.272727h192.465454c12.8 0 23.272727 10.472727 23.272728 23.272727s-10.472727 23.272727-23.272728 23.272728z" fill="#707070" p-id="6437"></path><path d="M306.734545 886.225455H165.236364c-25.6 0-46.545455-20.945455-46.545455-46.545455V462.196364c0-25.6 20.945455-46.545455 46.545455-46.545455h141.498181c12.8 0 23.272727 10.472727 23.272728 23.272727v424.029091c0 12.8-10.24 23.272727-23.272728 23.272728zM165.236364 462.196364v377.483636h118.225454V462.196364H165.236364z" fill="#707070" p-id="6438"></path><path d="M737.978182 886.225455h-114.967273c-12.8 0-23.272727-10.472727-23.272727-23.272728s10.472727-23.272727 23.272727-23.272727h114.967273c11.636364 0 21.643636-8.378182 23.505454-20.014545l54.923637-329.774546c1.163636-6.981818-0.698182-13.963636-5.352728-19.316364-4.654545-5.352727-11.170909-8.378182-18.152727-8.378181h-224.116363c-21.643636 0-42.356364-11.403636-52.596364-28.858182-8.843636-14.894545-8.843636-32.116364-0.232727-47.243637 28.392727-50.269091 46.545455-171.054545 33.047272-190.138181-4.654545-4.421818-11.869091-10.472727-18.618181-10.472728-6.516364 0-13.963636 5.818182-18.85091 10.938182-3.258182 4.421818-11.869091 27.229091-18.850909 45.614546-30.952727 82.385455-83.083636 220.392727-186.181818 220.392727-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272728c70.981818 0 117.527273-123.810909 142.661818-190.138181 13.730909-36.305455 20.014545-52.829091 29.323637-62.138182 32.581818-32.581818 71.214545-32.349091 103.563636 0 40.029091 40.029091 1.629091 196.654545-25.832727 245.527272 0 2.094545 4.887273 6.749091 12.334545 6.749091h224.116364c20.712727 0 40.261818 9.076364 53.76 24.901819s19.083636 36.538182 15.592727 57.018181L807.563636 827.345455a70.283636 70.283636 0 0 1-69.585454 58.88z" fill="#707070" p-id="6439"></path></svg>
                    <span>222</span>个 &nbsp;· <span>9月12日</span> 
                </div> -->
            </div>
        </div>
        <div class="side">
            <p>2</p>
            <li>
                <svg t="1600085653527" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6436" width="32" height="32"><path d="M499.432727 886.225455h-192.465454c-12.8 0-23.272727-10.472727-23.272728-23.272728s10.472727-23.272727 23.272728-23.272727h192.465454c12.8 0 23.272727 10.472727 23.272728 23.272727s-10.472727 23.272727-23.272728 23.272728z" fill="#707070" p-id="6437"></path><path d="M306.734545 886.225455H165.236364c-25.6 0-46.545455-20.945455-46.545455-46.545455V462.196364c0-25.6 20.945455-46.545455 46.545455-46.545455h141.498181c12.8 0 23.272727 10.472727 23.272728 23.272727v424.029091c0 12.8-10.24 23.272727-23.272728 23.272728zM165.236364 462.196364v377.483636h118.225454V462.196364H165.236364z" fill="#707070" p-id="6438"></path><path d="M737.978182 886.225455h-114.967273c-12.8 0-23.272727-10.472727-23.272727-23.272728s10.472727-23.272727 23.272727-23.272727h114.967273c11.636364 0 21.643636-8.378182 23.505454-20.014545l54.923637-329.774546c1.163636-6.981818-0.698182-13.963636-5.352728-19.316364-4.654545-5.352727-11.170909-8.378182-18.152727-8.378181h-224.116363c-21.643636 0-42.356364-11.403636-52.596364-28.858182-8.843636-14.894545-8.843636-32.116364-0.232727-47.243637 28.392727-50.269091 46.545455-171.054545 33.047272-190.138181-4.654545-4.421818-11.869091-10.472727-18.618181-10.472728-6.516364 0-13.963636 5.818182-18.85091 10.938182-3.258182 4.421818-11.869091 27.229091-18.850909 45.614546-30.952727 82.385455-83.083636 220.392727-186.181818 220.392727-12.8 0-23.272727-10.472727-23.272727-23.272727s10.472727-23.272727 23.272727-23.272728c70.981818 0 117.527273-123.810909 142.661818-190.138181 13.730909-36.305455 20.014545-52.829091 29.323637-62.138182 32.581818-32.581818 71.214545-32.349091 103.563636 0 40.029091 40.029091 1.629091 196.654545-25.832727 245.527272 0 2.094545 4.887273 6.749091 12.334545 6.749091h224.116364c20.712727 0 40.261818 9.076364 53.76 24.901819s19.083636 36.538182 15.592727 57.018181L807.563636 827.345455a70.283636 70.283636 0 0 1-69.585454 58.88z" fill="#707070" p-id="6439"></path></svg>
            </li>
            <li>
                <svg t="1600085519251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4446" width="22" height="22"><path d="M289.013833 389.741547c-30.743156 0-55.704033 25.857868-55.704033 57.785222 0 31.906767 24.961076 57.764236 55.704033 57.764236 30.788126 0 55.704632-25.857469 55.704632-57.764236C344.718265 415.599416 319.801758 389.741547 289.013833 389.741547L289.013833 389.741547 289.013833 389.741547zM511.832162 389.741547c-30.783129 0-55.704632 25.857868-55.704632 57.785222 0 31.906767 24.921503 57.764236 55.704632 57.764236 30.743156 0 55.66306-25.857469 55.66306-57.764236C567.495222 415.599416 542.575118 389.741547 511.832162 389.741547L511.832162 389.741547 511.832162 389.741547zM734.610518 389.741547c-30.742956 0-55.707031 25.857868-55.707031 57.785222 0 31.906767 24.964074 57.764236 55.707031 57.764236 30.73816 0 55.702234-25.857469 55.702234-57.764236C790.312552 415.599416 765.348678 389.741547 734.610518 389.741547L734.610518 389.741547 734.610518 389.741547zM846.014786 128.488877 177.647539 128.488877c-61.528684 0-111.406666 51.748315-111.406666 115.572442l0 378.055678c0 63.803541 50.972241 122.622662 113.903973 122.622662l169.785485 0c29.562357 31.527624 152.047512 145.002288 152.047512 145.002288 5.434316 5.669156 14.235348 5.669156 19.663668 0 0 0 89.686992-88.341904 148.107183-145.002288l173.728612 0c62.934131 0 113.906571-58.818921 113.906571-122.622662l0-378.055678C957.383878 180.237191 907.500898 128.488877 846.014786 128.488877L846.014786 128.488877 846.014786 128.488877zM901.676847 622.116997c0 31.896374-26.752662 65.382471-58.199341 65.382471l-170.837772 0c-20.713956 0-39.323339 21.257587-39.323339 21.257587l-119.950474 111.137249-119.948275-111.137249c0 0-22.815931-21.257587-42.390659-21.257587l-170.882142 0c-31.444681 0-58.201939-33.486096-58.201939-65.382471l0-378.055678c0-31.926754 24.919105-57.779625 55.704632-57.779625l668.367247 0c30.747953 0 55.662061 25.852872 55.662061 57.779625L901.676847 622.116997 901.676847 622.116997 901.676847 622.116997z" p-id="4447" fill="#707070"></path></svg>
            </li>
            <li>
                <svg t="1600085557732" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5413" width="22" height="22"><path d="M755.34336 443.79136a191.488 191.488 0 1 0-188.81536-157.47072L397.27616 357.32992a179.7376 179.7376 0 1 0-34.2528 267.93984l150.9376 106.22976a159.0528 159.0528 0 0 0-11.87328 60.2368 161.32096 161.32096 0 1 0 56.832-122.19904l-142.39232-100.23424a178.82112 178.82112 0 0 0 18.432-144.79872L594.944 357.376a192 192 0 0 0 160.39936 86.41536zM158.66368 476.29312a103.6032 103.6032 0 1 1 103.6032 103.23456 103.53664 103.53664 0 0 1-103.6032-103.23456z m504.58624 231.3216a84.1216 84.1216 0 1 1-84.41856 84.1216 84.36736 84.36736 0 0 1 84.41856-84.1216z m92.09344-569.7024a114.688 114.688 0 1 1-115.11808 114.688 115.03616 115.03616 0 0 1 115.11808-114.688z" fill="#707070" p-id="5414"></path></svg>
                
            </li>
        </div>
    </div>
    <div style="clear: both; height: 30px;"></div>
    <script>
        $("#Navigation").load("Navigation.html");
    </script>  
</body>
</html>